<template>
  <div class="new">
    <Header></Header>
    <div>
      <div class="fa-hacker-news">
        <img src="../assets/img/back/news.png" style="width: 1200px" alt="">
      </div>
      <div>
        <div v-for="news in news_list" :key="news.id" style="width: 1200px;margin: 0 auto">
          <div class="new1">
            <div style="width: 300px ;float:left;">
              <img :src="news.avatar" alt=""style="margin-left: 80px">
            </div>
            <div class="" style="float:left; width: 600px;margin-left: 150px">
              <h2> <router-link :to="'/new/detail/'+news.id">{{ news.title }}</router-link></h2>
              <p>{{ news.content.slice(0, 87) }}</p>
            </div>
          </div>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "New",
  data() {
    return {
      news_list: [],
    }
  },
  components: {
    Header,
    Footer,

  },
  created() {
    this.$http.get(`${this.$settings.base_url}new/new/`).then(res => {
      this.news_list = res.data
      console.log(this.news_list)
    })
  }
}
</script>

<style scoped>
.fa-hacker-news {
  width: 1200px;
  margin: 0 auto;
}

.new1 {
  width: 1200px;
  height: 151px;
  margin: 7px 0 7px 0;
  border-bottom: 1px black dashed;
}
router-link{
  color: black;
}
</style>